//引入各种插件
const HtmlWebpackPlugin = require('html-webpack-plugin')//引入html提取插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//引入css提取插件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//引入压缩css的插件

//根据页面数自动自动生成js入口和html入口
let glob = require('glob');
let js = glob.sync('./src/pages/*/*.js')
let entryObj = {}
js.forEach(v => {
    let fn = v.split('/').pop().replace('.js', "")
    entryObj[fn] = v;
})

let html = glob.sync('./src/pages/*/*.html');
let htmlArr = [];
html.forEach(v => {
    let filename = v.split('/').pop();
    let name = filename.replace('.html', "");

    htmlArr.push(
        new HtmlWebpackPlugin({
            template: v,//设置html文件的入口
            filename: filename,//设置出口
            chunks: [name]//设置html中加载哪些模块
        }),
    );
})
console.log(htmlArr);

//webpack的配置文件
module.exports = {
    //多入口
    entry: entryObj,

    //多出口
    output: {
        filename: 'js/[name].js',
        path: __dirname + '/dist',
        publicPath: './',//公共资源路径
    },


    //加载器 loader
    module: {
        rules: [
            //引入css 加载器
            {
                test: /\.css$/i,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    },
                }, 'css-loader']
            },

            //less加载器
            {
                test: /\.less$/i, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    },
                }, 'css-loader', 'less-loader']
            },

            //图片加载器
            {
                test: /\.(jpg|png|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024,//10kb以下打包成代码,10kb以上打包成文件
                        name: '[hash:8].[ext]',//设置打包后的文件名
                        outputPath: 'imgs',//设置输出文件的路径
                        esModule: false,//关闭ES6的模块化
                    }
                }
                ]
            },
            //html加载器
            { test: /\.html$/i, use: ['html-loader'] },


            //字体图标加载器
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                    outputPath: 'fonts',
                    esModule: false,
                }
            }
        ]

    },

    //插件
    plugins: [
        //html插件
        ...htmlArr,

        //css提取插件
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),

        //压缩css的插件
        new OptimizeCssAssetsWebpackPlugin(),

    ],

    //模式 development开发模式  ,production生产模式
    mode: process.env.NODE_ENV,//自动启用模式


    //开发服务器
    devServer: {
        contentBase: __dirname + '/dist',// 启动服务器目录
        compress: true,// 启动gzip
        port: 8080,// 端口
        open: true,// 自动打开服务
        publicPath: '/',// 静态资源查找路径
        openPage: 'ad.html',// 打开的页面
    },

}



